import React from 'react';
import { Card, Row, Col, Button } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { Link } from 'umi';

const GeneratedImages: React.FC = () => {
  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24, textAlign: 'center' }}>
        <h1 style={{ fontSize: 32, fontWeight: 'bold', marginBottom: 16 }}>AI出图系统</h1>
        <p style={{ fontSize: 16, color: '#666' }}>利用人工智能技术生成各种精美的图片</p>
      </div>
      
      <Row gutter={[16, 16]} justify="center">
        <Col xs={24} sm={12} md={8}>
          <Card
            hoverable
            style={{ height: 300, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
            actions={[
              <Link key="goto" to="/generatedImages/oneKeyBackground">
                <Button type="primary">开始使用</Button>
              </Link>
            ]}
          >
            <SettingOutlined style={{ fontSize: 48, marginBottom: 16, color: '#1890ff' }} />
            <h3 style={{ fontSize: 20, marginBottom: 8 }}>一键背景生成</h3>
            <p style={{ color: '#666', textAlign: 'center' }}>快速生成各种风格的背景图片，简单易用</p>
          </Card>
        </Col>
        
        <Col xs={24} sm={12} md={8}>
          <Card
            hoverable
            style={{ height: 300, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
            actions={[
              <Link key="goto" to="/generatedImages/referenceBackground">
                <Button type="primary">开始使用</Button>
              </Link>
            ]}
          >
            <SettingOutlined style={{ fontSize: 48, marginBottom: 16, color: '#52c41a' }} />
            <h3 style={{ fontSize: 20, marginBottom: 8 }}>参考背景生成</h3>
            <p style={{ color: '#666', textAlign: 'center' }}>根据参考图片生成类似风格的背景</p>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default GeneratedImages;